<template>
    <div class="small-box" :class="classs" :style="styleObj">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "qg-small-box",
    props: {
        backgroundColor: {
            type: String,
            default: "",
        },
        color: {
            type: String,
            default: "#333333",
        },
        width: {
            type: String,
            default: "36rem",
        },
        height: {
            type: String,
            default: "36rem",
        },
        classs: {
            type: String,
            default: "font-14",
        },
    },
    computed: {
        styleObj() {
            let obj = {};
            if (this.backgroundColor) {
                obj.border = "none";
            }
            obj = Object.assign(this._props, obj);
            return obj;
        },
    },
};
</script>

<style lang="less" scoped>
.small-box {
    border-radius: 4rem;
    border: solid 1rem #dddddd;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
